<template>
	<div>
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad">
			<van-cell 
				v-for="item in list" 
				:key="item.id"
				@click="handleClick(item.id)">
				<div class="list">
					<div class="left">
						<img :src="'//'+item.img" alt="">
					</div>
					<div class="right">
						<div class="title">{{item.title}}</div>
						<div class="create-time">{{item.createTime}}</div>
					</div>
				</div>
			</van-cell>
		</van-list>
	</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				list: [],
				loading: false,
				finished: false
			}
		},
		methods: {
			handleClick(id){
				this.$router.push({
					path: '/detail',
					query: {
						id
					}
				})
			},
			onLoad() {
				fetch('/article/lists')
				.then( res=>res.json())
				.then( res=>{
					if(res.status == 200){
						this.list = res.data.map(item=>{
							if(item.createTime){
								item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
							}
							return item
						})
						// 加载状态结束
						this.loading = false
						this.finished = true
					}else{
						this.$toast.fail(res.errMsg)
					}
				})
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				// setTimeout(() => {
				// 	this.list = [
				// 		{
				// 			id: 1,
				// 			img: "//img.mukewang.com/5de0b94d0982077300000000.jpg",
				// 			title: "桂林当地游 3天跟团游",
				// 			createTime:"2017-11-17"
				// 		},
				// 		{
				// 			id: 2,
				// 			img: "//imgs.qunarzz.com/p/tts0/1606/fa/187fbfea36bbe9a.jpg_180x120_c58f5e71.jpg",
				// 			title: "桂林当地游 4天跟团游",
				// 			createTime:"2020-11-17"
				// 		}
				// 	]
				// 	// 加载状态结束
				// 	this.loading = false;
				// 	this.finished = true;
				// }, 1000)
			}
		}
	}
</script>

<style scoped>
	.list{
		display: flex;
		flex-direction: row;
	}
	.list .left img{
		width: 150px;
		height: 100px;
		border-radius: 10px;
	}
	.list .right{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 15px;
	}
	.list .right .title{
		font-size: 18px;
	}
	.list .right .create-time{
		font-size: 12px;
		color: #9e9e9e;
	}
</style>
